<template>
  <div class="header">
    <div class="navs">
      <div class="nav_left">
        <router-link to="/index">
          <img src="../../public/images/nav/logo2.png" alt />
        </router-link>
      </div>
      <ul class="nav_list">
        <li
          v-for="(item, index) in data.nav"
          :key="item.id"
          class="navlist"
          @mouseover="handleToggle(index)"
        >
          <router-link to="/shoppinglist">{{ item.title }}</router-link>
          <div class="listbg">
            <div class="listToggle">
              <div class="listToggle_left">
                <ul>
                  <li v-for="(item1, index1) in item.onelist" :key="index1">
                    <router-link to="/list" class="listToggle_left_a">{{
                      item1
                    }}</router-link>
                  </li>
                </ul>
                <ul>
                  <li v-for="(item2, index2) in item.twolist" :key="index2">
                    <router-link to="/shoppinglist" class="listToggle_left_a">{{
                      item2
                    }}</router-link>
                  </li>
                </ul>
                <ul>
                  <li v-for="(item3, index3) in item.threelist" :key="index3">
                    <router-link to="/shoppinglist" class="listToggle_left_a">{{
                      item3
                    }}</router-link>
                  </li>
                </ul>
              </div>
              <div class="listToggle_right" v-show="data.currentIndex != 5">
                <img :src="item.img" alt />
                <div>
                  <p>{{ item.imgtext1 }}</p>
                  <p>{{ item.imgtext2 }}</p>
                  <router-link to="/shoppinglist">前往查看</router-link>
                </div>
              </div>
              <div
                class="listToggle_right piju"
                v-show="data.currentIndex === 5"
              >
                <router-link
                  to="/shoppinglist"
                  v-for="(itempiju, index) in data.piju"
                  :key="index"
                >
                  <img :src="itempiju.src" alt />
                  <p>{{ itempiju.text }}</p>
                </router-link>
              </div>
            </div>
          </div>
        </li>
        <div class="nav_searchs">
          <div class="search_sousuo">
            <input
              type="text"
              @keyup.enter="handleSearch"
              @focus="handleFocus"
              v-model="data.inputVal"
            />
            <img
              src="../../public/images/nav/search.png"
              alt="search"
              @click="handleClose"
              ref="imgsrc"
            />
          </div>
          <div class="search_bg" ref="search_bg">
            <div class="search_tuijian">
              <p>为您推荐</p>
              <ul>
                <li v-for="(item, index) in data.tuijian" :key="index">
                  <router-link to="/list">
                    <img :src="item.src" alt />
                    <p>{{ item.text }}</p>
                  </router-link>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </ul>
      <div class="nav_right">
        <div>
          <router-link to="/login" v-if="$store.state.isLogin" class="nav_user">
            <img
              src="../../public/images/nav/user2.png"
              alt
              title="登录/注册"
            />
          </router-link>
          <div
            class="isUser"
            @mouseover="data.isShow = true"
            @mouseout="data.isShow = false"
            v-else
          >
            <img src="../../public/images/nav/isuser2.png" alt />
            <div v-show="data.isShow">
              <router-link to="/user">个人中心</router-link>
              <router-link to="/" @click.prevent="handleQuit">退出</router-link>
            </div>
          </div>
        </div>
        <div>
          <router-link to="/cart">
            <img
              src="../../public/images/nav/shopping.png"
              alt
              title="购物袋"
            />
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
import { $get, $post } from "../../request/index";
const $router = useRouter();
const $route = useRoute();

const $store = useStore();
const search_bg = ref();
const imgsrc = ref();

//定义数据
const data = reactive({
  currentIndex: -1,
  isShow: false,
  inputVal: "",
  nav: [
    {
      id: 1,
      title: "男士",
      onelist: ["新品上市", "科摩系列", "街头趣闯系列", "舒适型走系列"],
      twolist: ["男鞋", "休闲鞋", "正装鞋", "靴子/高帮鞋", "凉鞋"],
      img: "../../public/images/nav/man.jpg",
      imgtext1: "男鞋系列",
      imgtext2: "探索我们的优质皮革与创新舒适",
    },
    {
      id: 2,
      title: "女士",
      onelist: ["新品上市", "科摩系列", "街头趣闯系列", "舒适型走系列"],
      twolist: ["女鞋", "休闲鞋", "正装鞋/高跟鞋", "靴子/高帮鞋", "凉鞋"],
      img: "../../public/images/nav/women.jpg",
      imgtext1: "女鞋系列",
      imgtext2: "探索创新舒适与优雅设计",
    },
    {
      id: 3,
      title: "运动休闲",
      onelist: ["适动360系列", "悦动系列", "跃乐系列"],
      twolist: ["男鞋", "低帮鞋", "高帮鞋"],
      threelist: ["女鞋", "低帮鞋", "高帮鞋"],
      img: "../../public/images/nav/yundong.jpg",
      imgtext1: "运动休闲鞋系列",
      imgtext2: "玩转个性型格",
    },
    {
      id: 4,
      title: "户外",
      onelist: ["驱动系列", "健步2.1越野系列", "健步2.0系列", "越野系列"],
      twolist: ["男鞋", "低帮鞋", "凉鞋", "高帮鞋&靴子"],
      threelist: ["女鞋", "低帮鞋", "凉鞋", "高帮鞋&靴子"],
      fourlist: ["高尔夫鞋", "男鞋", "女鞋"],
      img: "../../public/images/nav/huwai.jpg",
      imgtext1: "户外鞋系列",
      imgtext2: "开启自由律动新风尚",
    },
    {
      id: 5,
      title: "童鞋",
      onelist: ["婴童", "低帮鞋", "凉鞋", "高帮鞋&靴子"],
      twolist: ["儿童", "低帮鞋", "凉鞋", "高帮鞋&靴子"],
      threelist: ["青少年", "低帮鞋", "凉鞋", "高帮鞋&靴子"],
      img: "../../public/images/nav/tongxie.jpg",
      imgtext1: "儿童系列",
      imgtext2: "轻松体验成长的每一步",
    },
    {
      id: 6,
      title: "皮具系列",
      twolist: [
        "所有分类",
        "新品上市",
        "单肩包",
        "双肩包",
        "托特包",
        "钱包&手拿包",
        "其他皮具",
      ],
    },
    {
      id: 7,
      title: "鞋护&配件",
      onelist: ["鞋护", "鞋护套装", "单品鞋护"],
      twolist: ["配件", "鞋垫", "袜子", "鞋带"],
      img: "../../public/images/nav/peijian.jpg",
      imgtext1: "鞋护&配件",
      imgtext2: "清洁、护理、保护三部曲",
    },
  ],
  piju: [
    {
      src: "../../public/images/nav/45c960844de04f14a0a7fe70ada2f746356ff32a.jpg",
      text: "AIBU全新皮具系列",
    },
    {
      src: "../../public/images/nav/945fda127e79c14df3a9693c5634e8e67a61d86e.jpg",
      text: "AIBU壶型包",
    },
    {
      src: "../../public/images/nav/b4f6e6640534a46157f41ac8aa4503d9a5a1ec0b.jpg",
      text: "当月主推",
    },
    {
      src: "../../public/images/nav/f3f963d783718c9983d197e2716c48e80a0e8b87.jpg",
      text: "AIBU皮具系列穿搭",
    },
  ],
  tuijian: [
    {
      src: "../../public/images/nav/tuijian1.jpg",
      text: "无绿不夏天",
    },
    {
      src: "../../public/images/nav/tuijian2.jpg",
      text: "徒出轻趣",
    },
    {
      src: "../../public/images/nav/tuijian3.jpg",
      text: "悦动未来",
    },
    {
      src: "../../public/images/nav/tuijian4.jpg",
      text: "自在随型",
    },
  ],
});

if (localStorage.getItem("token")) {
  $store.commit("isLogin");
  console.log("登录");
} else {
  console.log("未登录");
  $store.commit("notLogin");
}

//定义方法
const handleToggle = (index) => {
  data.currentIndex = index;
};
const handleSearch = () => {
  $store.commit("search", data.inputVal);
  $router.push("/search");
};
const handleQuit = () => {
  let username = localStorage.getItem("username");
  $store.commit("notLogin");
  console.log($store.state.isLogin);
  $get("/user/quit", { username })
    .then((data) => {
      localStorage.clear();
      $store.commit("notLogin");
    })
    .catch((err) => {
      console.log(err);
    });
};

const handleFocus = () => {
  search_bg.value.style.height = "24rem";
  search_bg.value.style.transition = "all 0.2s linear";
  imgsrc.value.src = "../../public/images/nav/close.png";
};
const handleClose = () => {
  data.inputVal = "";
  search_bg.value.style.height = "0";
  search_bg.value.style.transition = "all 0.2s linear";
  imgsrc.value.src = "../../public/images/nav/search.png";
};
</script>

<style scoped>
.header {
  width: 100%;
  position: relative;
  background-color: white;
  position: fixed;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgb(206, 206, 206);
}
.navs {
  width: 94rem;
  height: 4rem;
  margin: 0 auto;
  background-color: white;
  display: flex;
  justify-content: space-between;
}
.nav_left {
  margin-left: 1rem;
  width: 10rem;
  margin-top: -0.4rem;
}
.nav_left img {
  width: 100%;
}
.nav_list {
  height: 4rem;
  line-height: 4rem;
  width: 50rem;
  display: flex;
}
.navlist {
  margin-right: 1.4rem;
  color: black;
  white-space: nowrap;
}
.navlist:hover {
  border-bottom: 2px solid black;
}
.navlist:hover .listbg {
  height: 20rem;
}
.listbg {
  position: absolute;
  width: 100%;
  left: 0;
  height: 0;
  background-color: white;
  overflow: hidden;
  transition: all 0.2s linear;
}
.listToggle {
  width: 94rem;
  height: 20rem;
  padding: 1rem;
  box-sizing: border-box;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

.listToggle_left {
  display: flex;
}
.listToggle_right {
  margin-top: 1rem;
  position: relative;
}
.listToggle_left_a:hover {
  color: rgb(171, 3, 3);
}
.listToggle_left ul {
  margin: 0 5rem 0 1rem;
}
.listToggle_left ul li {
  margin-bottom: -2rem;
}
.listToggle_left ul li a {
  font-size: 1.2rem;
  color: rgb(89, 89, 89);
}
.listToggle_right div {
  white-space: nowrap;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
}
.listToggle_right div p {
  color: white;
  height: 1rem;
}
.listToggle_right div p:first-of-type {
  font-size: 1.2rem;
  font-weight: bold;
}
.listToggle_right div p:last-of-type {
  margin-bottom: 2rem;
}
.listToggle_right div a {
  font-size: 0.8rem;
  padding: 0.4rem 2rem;
  color: black;
  font-weight: bold;
  background-color: white;
}
.piju {
  display: flex;
  margin-top: 0rem;
  margin-right: 10rem;
}
.piju a {
  width: 14rem;
  padding: 1rem;
  text-align: center;
}
.piju a p {
  margin-top: -2.2rem;
  font-size: 1.4rem;
}
.piju a:hover {
  box-shadow: 0 0 1rem grey;
}
.piju a img {
  width: 100%;
}
.search_sousuo {
  position: relative;
}
.search_bg {
  position: absolute;
  left: 0;
  width: 100%;
  height: 0;
  background-color: white;
  z-index: -1;
  overflow: hidden;
}
.search_tuijian {
  width: 66rem;
  margin: 0 auto;
}
.search_tuijian > p {
  font-size: 1.8rem;
  margin-left: 2rem;
}
.search_tuijian ul {
  display: flex;
  text-align: center;
}
.search_tuijian ul li {
  width: 14rem;
  margin-left: 1.8rem;
  margin-bottom: 2rem;
}
.search_tuijian ul li:hover {
  box-shadow: 0 0 1rem gray;
}
.search_tuijian ul li img {
  width: 100%;
}
.search_tuijian ul li p {
  margin-top: -1.4rem;
  font-size: 1.6rem;
}
.search_sousuo img {
  width: 1rem;
  position: absolute;
  top: 1.6rem;
  right: 0.4rem;
}
.search_sousuo input {
  height: 1.6rem;
  border-radius: 0.5rem;
  padding-left: 0.5rem;
  box-sizing: border-box;
}
.nav_right {
  display: flex;
  margin-top: 1.2rem;
}
.nav_right > div {
  width: 2rem;
  margin-right: 1rem;
}
.nav_right img {
  width: 100%;
}
.nav_user img,
.isUser img {
  width: 120%;
  margin-top: -0.2rem;
}
.isUser {
  position: relative;
}
.isUser div {
  position: absolute;
  width: 6rem;
  height: 6rem;
  left: -4.4rem;
  text-align: center;
  border-radius: 0.2rem;
  box-shadow: 0 0 0.4rem gainsboro;
  background-color: white;
}
.isUser div a {
  display: block;
  margin-top: 1rem;
}
</style>
